<template>
  <!-- <div id="svg-box" class="svg-box" /> -->
  <div class="svg-box" />
</template>
<script>
import * as d3 from 'd3'
const data = [99, 71, 78, 25, 36, 92]

export default {
  mounted() {
    // const svg = d3.select(docum/ent.getElementById('svg-box'))
    const svg = d3.select(this.$el)
      .append('svg')
      .attr('width', 500)
      .attr('height', 270)
      .append('g')
      .attr('transform', 'translate(0, 10)')

    const x = d3.scaleLinear().range([0, 430])
    const y = d3.scaleLinear().range([210, 0])
    d3.axisLeft().scale(x)
    d3.axisTop().scale(y)
    x.domain(d3.extent(data, (d, i) => i))
    y.domain([0, d3.max(data, d => d)])
    const createPath = d3.line()
      .x((d, i) => x(i))
      .y(d => y(d))
    svg.append('path').attr('d', createPath(data))
  }
  // template: '<div></div>'
}
</script>
<style lang="sass">
.svg-box
  svg
    margin: 25px
    path
      fill: none
      stroke: #76BF8A
      stroke-width: 3px
</style>
<style lang="scss">
// .svg-box {
//   svg {
//     margin: 25px;

//     path {
//       fill: none;
//       stroke: #76BF8A;
//       stroke-width: 3px;
//     }
//   }
// }
</style>
